<template>
	<div class="movie">
		<div class="MovieDetail">
			<img :src="movie.img"/>
			<div class="detail">
				<p class="nm">{{movie.nm}}</p>
				<p class="sc" v-if="movie.sc!==0">{{movie.sc}}分</p>
				<p class="sc" v-else style="color: #A69892;">暂无评分</p>
				<p v-if="movie.showSnum&&movie.sc!==0">({{movie.snum}}人评分)</p>
				<p v-else>({{movie.wish}}人想看)</p>
				<p class="type">{{movie.cat}}</p>
				<p>{{movie.src}} / {{movie.dur}}分钟</p>
				<p>{{movie.rt}}</p>
			</div>
		</div>
		<div class="content">
			<div class="btn">立即购票</div>
			<div class="dra" v-bind:style="{overflow:overflow,height:mH}">{{movie.dra}}</div>
			<div class="up" @click="showdra()" :data-on='dataOn'><span v-if="up">&or;</span><span v-else>&and;</span></div>
		</div>
		
		<div class="movieReview">
			<div class="title">观众评论</div>
			<reviewList v-bind:reviewList="reviewList"></reviewList>
			<div class="moreReview" @click="goMore()">查看全部{{total}}条观众评论</div>
		</div>
	</div>
</template>

<script>
	import reviewList from '@/components/index'
	export default {
		data(){
			return{
				id:'',
				movie:[],
				reviewList:[],
				up:true,
				dataOn:0,
				overflow:'hidden',
				mH:'74rpx',
				total:'',
				nopic:"http://p0.meituan.net/movie/7dd82a16316ab32c8359debdb04396ef2897.png"
			}
		},
		components: {
    		reviewList
  		},
		onLoad:function(options){
			wx.setNavigationBarTitle({
				title: "影片详情" 
			})
			this.id=options.id;
			this.getMovie();
			
			
		},
		
		methods:{
			getMovie:function(){
				var that = this;
				wx.request({
					url:"https://m.maoyan.com/movie/"+that.id+".json",
					success:function(res){
						
						that.total = res.data.data.CommentResponseModel.total;
						var dra = res.data.data.MovieDetailModel.dra.replace(/<.*?>/ig,"");
						res.data.data.MovieDetailModel.dra= dra;
						that.movie =res.data.data.MovieDetailModel;
						var cmts = res.data.data.CommentResponseModel.cmts;
						for(var i=0;i<cmts.length;i++){
							var arr = that.showstar(cmts[i].score);
							cmts[i].score = arr;
						}
						that.reviewList = cmts;
						
						
					}
				})
			},
			showdra:function(){
				var dataOn = this.dataOn;
				if(dataOn==0){
					this.dataOn =1;
					this.overflow='auto'
					this.mH='74rpx';
					this.up=true;
				}else{
					this.dataOn =0;
					this.overflow='hidden'
					this.mH='auto';
					this.up=false;
				}
			},
			showstar:function(score){
				var arr=[];
				if((score/0.5)%2==0){
					for(var i=0;i<5;i++){
						if(i<score){
							arr.push('stargary')
						}else{
							arr.push('starfull')
						}
					}
				}else{
					for(var i=0;i<5;i++){
						if(i<score-0.5){
       						arr.push('stargary');
	      				}else if(i==(score-0.5)){
	       					arr.push('starban');
	      				}else{
	       					arr.push('starfull');
	      				}
					}
				}
				return arr;
			},
			goMore:function(){
				//console.log(this.id);
				wx.navigateTo({
					url: '/pages/review/main?id=' + this.id
				});
			}
		}
	}
</script>

<style>
.MovieDetail{display: flex;background: #392f59 url(http://ms0.meituan.net/mywww/banner_bg.f7fd103e3b8c16b6f449cce43fc57f45.png) no-repeat 50%;height: 350rpx;padding: 30rpx 20rpx;}
img {flex: 1;height: auto;}
.detail{flex: 2;}
.detail p{margin-left: 40rpx;font-size: 26rpx;color: #A69892;margin-top: 20rpx;}
.detail p.nm{color: #FFFFFF;font-size: 34rpx;font-weight: bolder;margin-top: 0;}
.detail p.sc{color: #FFBF4C;font-size: 32rpx;font-weight: 400;margin-top: 26rpx;}
.detail p.type{margin-top: 0;}
.content{padding: 20rpx 30rpx;border-bottom: 3rpx solid #A69892;}
.content .btn{color: #fff;border-radius:10rpx;font-size: 26rpx;text-align: center;background: #FF0000;padding: 20rpx 0;}
.content .dra{height: 74rpx;font-size: 26rpx;margin-top: 30rpx;}
.up{text-align: center;}
.movieReview{margin: 10rpx 0;}
.movieReview .title{padding: 15rpx 30rpx;font-size: 28rpx;color: #A69892;border-bottom: 3rpx solid #A69892;} 
.reviewList li{padding: 20rpx 0;padding-left: 10rpx;display: flex;}
.reviewList li .img {flex: 1;text-align: center;}
.reviewList li img{width: 80rpx;height: 80rpx;border-radius:50% ;}
.reviewList li .reviecontent{flex: 5;border-bottom:2rpx solid #A69892 ;}
.reviewList li:last-child .reviecontent{border: 0;}
.reviewList li .reviecontent p{font-size:24rpx ;color: #000;}
.reviecontent p.content1{font-size: 28rpx;margin-top: 20rpx;padding-right: 30rpx;}
.grade i{display: inline-block;vertical-align: top;width: 30rpx;height: 30rpx;}
.grade i.starfull{background: url(../../../static/img/starfull.png) no-repeat;background-size:cover ;}
.grade i.stargary{background: url(../../../static/img/stargary.png) no-repeat;background-size:cover ;}
.grade i.starban{background: url(../../../static/img/starban.png) no-repeat;background-size:cover ;}
.reviewList li .reviecontent p.time{margin-top: 10rpx;color: #A69892;margin-bottom: 20rpx;}
.moreReview{text-align: center;padding: 20rpx 0;font-size: 26rpx;color: red;border-bottom: 1rpx solid #A69892;border-top: 1rpx solid #A69892 ;}
</style>